import React, { Component } from "react";
import "./index.css";

export default class List extends Component {
  render() {

    const {users, isFirst, isLoading, err} = this.props;

    return (
      <div className="row">
       {
        isFirst ? <h2>欢迎使用，请输入关键字，点击搜索按钮进行查询</h2> : 
        isLoading ? <h2>Loading......</h2> :
        err ? <h2>{err}</h2> :
        users.map((item) => {
          return (
            <div className="card" key={item.code}>
            <a href="https://github.com/reactjs" target="_blank" rel="noreferrer">
              <img alt="head_portrait"
                src="https://avatars.githubusercontent.com/u/6412038?v=3"
                style={{width: '100px'}}/>
            </a>
            <p className="card-text">{item.name}</p>
          </div>
          )
        })
       }
      </div>
    );
  }
}
